<%--
  Created by IntelliJ IDEA.
  User: 袁帅强
  Date: 2020/12/2
  Time: 15:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
</head>
<body>

<div id="min">
    <form class="layui-form" action="" id="adataform" lay-filter="ggg">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 50px">用户名</label>
            <div class="layui-input-inline">
                <input type="text"  name="name" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text"  name="tel" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-input-inline">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="re">刷新</button>
        </div>

    </form>
</div>

    <table class="layui-hide" id="test" lay-filter="test"></table>

    <%--<script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>

        </div>
    </script>--%>

    <%--<script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>--%>



    <script>
        layui.use(['table','form','jquery'], function(){
            var table = layui.table;
            var form=layui.form;
            var $=layui.jquery;
            table.render({
                elem: '#test'
                ,url:'${pageContext.request.contextPath}/ruzhudetail/queryAll'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: '用户数据表'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'ID',  fixed: 'left', unresize: true, sort: true}
                    ,{field:'orderid', title:'入住单号'}
                    ,{field:'name', title:'入住人姓名'}
                    ,{field:'tel', title:'入住人手机号'}
                    ,{field:'idcard', title:'身份证号', sort: true}
                    ,{field:'roomid', title:'房间号',  sort: true}
                    ,{field:'rzyj', title:'入住押金'}
                    ,{field:'rzdate1', title:'入住时间'}
                    ,{field:'leavedate1', title:'预计离开时间'}
                    /*,{fixed: 'right', title:'操作', toolbar: '#barDemo'}*/
                ]]
                ,page: true

            });

            form.on('submit(demo1)',function (data){

                table.reload("test",{
                    page:{
                        curr:1
                    },where:data.field
                })
                return false;
            })
            $("#re").click(function (){
                location=location;
            })

            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;

                };
            });

            //监听行工具事件
            /*table.on('tool(test)', function(obj){
                var data = obj.data;
                //console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    layer.prompt({
                        formType: 2
                        ,value: data.email
                    }, function(value, index){
                        obj.update({
                            email: value
                        });
                        layer.close(index);
                    });
                }
            });*/
        });
    </script>
</body>
</html>
